<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .home_main{
            height: 550px;
            background: #fff;
            padding: 20px;
            /* border: 1px solid red; */
        }
        .home_header{
            height: 100px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .home_header>div{
            height: 100px;
            width: 22%;
            padding: 25px 10px 10px 20px;
            margin-left: 35px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 2px 2px 10px #ccc;
        }
        .home_header .home_img{
            width: 41.66667%;
            height: 50px;
            float: left;
        }
        .home_header .home_img img{
            width: 50px;
            height: 50px;
        }
        .home_header .title{
            width: 58%;
            text-align: center;
            float: left;
        }
        .home_header .title span:first-child{
            line-height: 1.15;
            font-size: 16px;
            color: #777;
            font-weight: 700;
        }
        .home_header .title span:last-child{
            display: inline-block;
            margin-top: 10px;
            font-size: 18px;
            color: #333;
            width: 100%;
            margin-top: 10px;
        }
        .home_content{
            height: 420px;
        }
        .home_content .content{
            width: 33.33333%;
            height: 420px;
            float: left;
        }
        .home_content .content .list{
            height: 400px;
            background: #fff;
            margin-left: 20px;
            margin-top: 20px;
            border-radius: 5px;
            box-shadow: 2px 2px 10px #ccc;
            overflow: hidden;
        }
        .home_content .content .list img {
            width: 100%;
            height: 120px;
            overflow: hidden;
        }

        .home_content .content .list div.table{
            width: 100%;
            cursor: pointer;
            font-size: 12px;
        }
        .home_content .content .table thead th{
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .home_content .content .table th,td{
            text-align: center;
        }
        
    </style>
</head>
<body>
    <div class="home_main">
        <div class="home_header">
            <div class="top">
                <div class="home_img"><img src="./images/校内新闻.png" alt="加载失败"> </div>
               <div class="title">
                   <span>校内新闻</span><br>
                   <span>20</span>
                </div> 
            </div>
            <div class="top">
                <div class="home_img"><img src="./images/通知公告.png" alt=""> </div>
                <div class="title">
                    <span>通告公告</span><br>
                   <span>20</span>
                </div> 
            </div>
            <div class="top">
                <div class="home_img"><img src="./images/学术活动.png" alt=""> </div>
                <div class="title">                   
                    <span>学术活动</span><br>
                   <span>30</span>
                </div>  
            </div>
            <div class="top">
                <div class="home_img"><img src="./images/媒体聚焦.png" alt=""> </div> 
                <div class="title">                  
                    <span>媒体聚焦</span><br>
                   <span>84</span>
                </div>
            </div>
        </div>
        <div class="home_content">
            <div class="content">
                <div class="list">
                    <img src="./images/home_main1.jpg" alt="">
                    <div class="table">
                        <table class="table table-hover">
                            <thead>
                              <tr>
                                <th scope="col">校园新闻</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>我校召开研究生教育和学科建设工作网络会议</td>
                              </tr>
                              <tr>
                                <td>学校疫情防控工作领导小组召开第十五次工作会议</td>
                              </tr>
                              <tr>
                                <td colspan="2">test-charles-03</td>
                              </tr>
                              <tr>
                                <td colspan="2">test-charles-04</td>
                              </tr>
                              <tr>
                                <td colspan="2">test-charles-05</td>
                              </tr>
                              <tr>
                                <td colspan="2">test-charles-06</td>
                              </tr>
                              <tr>
                                <td colspan="2">test-charles-07</td>
                              </tr>
                            </tbody>
                          </table>
                    </div>
                </div>
            </div>
            
            <div class="content">
                <div class="list">
                    <img src="./images/home_main2.jpg" alt="">
                    <div>
                        <ul>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="list">
                    <img src="./images/home_main3.jpg" alt="">
                    <div>
                        <ul>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>